import { Form, Input, Select, Card, Image, message, Upload } from 'myselfantd';
import React, { useEffect, useCallback, useMemo } from 'react';
import { add, getImplementsSpupInfos, getInfoById, update } from '../api';
interface FormProps {
  data?: any;
  onFinish: (...parmas: any) => void;
  viewmode?: 'view' | 'add' | 'edit';
  id?: string;
  close: (...params: any) => void;
}
const App: React.FC<FormProps> = ({ viewmode = 'add', data, onFinish, id, close }) => {
  const onGenderChange = (value: string) => {};
  return (
    <Form.Layout
      viewmode={viewmode}
      data={async () => {
        if (id) {
          let { result } = await getInfoById(id);
          return result;
        }
      }}
      formItemData={useMemo(
        () => [
          [
            {
              name: 'name',
              label: '农具名称',
              rules: [{ required: true, message: '农具名称必填' }],
              render: () => <Input placeholder="请输入" />,
            },
            {
              name: 'deviceSpuId',
              label: '所属品类',
              rules: [{ required: true, message: '所属品类必填' }],
              render: () => (
                <Select
                  fieldNames={{ name: 'name', value: 'id' }}
                  request={async () => {
                    let { result } = await getImplementsSpupInfos({ categoryCode: 'all' });
                    return result;
                  }}
                  placeholder="请选择"
                  onChange={onGenderChange}
                  allowClear
                />
              ),
              editRender: () => (
                <Select
                  disabled
                  fieldNames={{ name: 'name', value: 'id' }}
                  request={async () => {
                    let { result } = await getImplementsSpupInfos({ categoryCode: 'all' });
                    return result;
                  }}
                  placeholder="请选择"
                  onChange={onGenderChange}
                  allowClear
                />
              ),
            },
          ],
          [
            {
              name: 'code',
              label: '出厂编号',
              rules: [{ required: true, message: '出厂编号必填' }],
              render: () => <Input placeholder="请输入出厂编号" />,
              editRender: () => <Input disabled placeholder="请输入出厂编号" />,
            },
            {
              name: 'widthOfCloth',
              label: '作业幅宽',
              rules: [{ required: true, message: '作业幅宽必填' }],
              render: () => <Input placeholder="请输入品类型号" />,
            },
          ],
          [
            {
              name: 'belongingSystem',
              label: '所属系统',
              rules: [{ required: true, message: '所属系统必填' }],
              render: () => (
                <Select placeholder="请选择" allowClear>
                  <Select.Option value="baseinfo" key="baseinfo">
                    设备管理系统
                  </Select.Option>
                  <Select.Option value="mmc" key="mmc">
                    一控多机
                  </Select.Option>
                  <Select.Option value="telematics" key="telematics">
                    车联网
                  </Select.Option>
                </Select>
              ),
              editRender: () => (
                <Select disabled placeholder="请选择" allowClear>
                  <Select.Option value="baseinfo" key="baseinfo">
                    设备管理系统
                  </Select.Option>
                  <Select.Option value="mmc" key="mmc">
                    一控多机
                  </Select.Option>
                  <Select.Option value="telematics" key="telematics">
                    车联网
                  </Select.Option>
                </Select>
              ),
            },
          ],
          [
            {
              name: 'image',
              label: '农具图片',
              render: () => <Upload urlTemplate={`${UPLOAD_IMG_URL_NEW}/hxdfs/{0}`} />,
            },
          ],
          [
            {
              name: 'note',
              label: '说 明',
              render: () => <Input.TextArea placeholder="请填写" />,
            },
          ],
        ],
        [],
      )}
      request={useCallback(async (val: any) => {
        if (viewmode === 'add') {
          let res = await add(val);
          if (res.message === 'success') {
            message.success('添加成功');
            onFinish();
          }
        } else {
          let res = await update(val);
          if (res.message === 'success') {
            message.success('编辑成功');
            onFinish();
          }
        }
      }, [])}
      onFinish={() => close()}
    />
  );
};

export default App;
